<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<head>
	<title>Charts | Klorofil - Free Bootstrap Dashboard Template</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../assets/vendor/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../assets/vendor/linearicons/style.css">
	<link rel="stylesheet" href="../assets/vendor/chartist/css/chartist-custom.css">
	<!-- MAIN CSS -->
	<link rel="stylesheet" href="../assets/css/main.css">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" href="../assets/css/demo.css">
	<!-- GOOGLE FONTS -->
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="../assets/img/favicon.png">
</head>

<body>
<!-- WRAPPER -->
<div id="wrapper">
	<!-- NAVBAR -->
	<%@include file="../top-bar.jsp" %>
	<!-- END NAVBAR -->
	<!-- LEFT SIDEBAR -->
	<%@include file="../left-bar.jsp" %>
	<!-- END LEFT SIDEBAR -->
	<!-- MAIN -->
	<div class="main">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<div class="container-fluid">
				<h3 class="page-title">用户信息分析</h3>
				<div class="row">
					<div class="col-md-6">
						<div class="panel">
							<div class="panel-heading">
								<h3 class="panel-title">每月增量</h3>
							</div>
							<div class="panel-body">
								<div id="demo-line-chart" class="ct-chart"></div>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="panel">
							<div class="panel-heading">
								<h3 class="panel-title">年龄分析</h3>
							</div>
							<div class="panel-body">
								<div id="demo-bar-chart" class="ct-chart"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6">
						<div class="panel">
							<div class="panel-heading">
								<h3 class="panel-title">城市分析</h3>
							</div>
							<div class="panel-body">
								<div id="demo-area-chart" class="ct-chart"></div>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="panel">
							<div class="panel-heading">
								<h3 class="panel-title">性别分析</h3>
							</div>
							<div class="panel-body">
								<div id="multiple-chart" class="ct-chart"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- END MAIN CONTENT -->
	</div>
	<!-- END MAIN -->
	<div class="clearfix"></div>
	<%@include file="../footer-bar.jsp" %>
</div>
<!-- END WRAPPER -->
<!-- Javascript -->
<script src="../assets/vendor/jquery/jquery.min.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="../assets/vendor/chartist/js/chartist.min.js"></script>

<script>
    /**
	 * 请求每月用户增量
     */
    function getAddUsersNumByMouth(date,userNumData,id,options) {
        $.ajax({
            url:"/userInfo/getAddUserNumByTenDays",
            data:{
                date:date
            },
            type:"post",
            dataType:"json",
            success:function (result) {
                for(var item in result){
					userNumData.labels.push(item);
					userNumData.series[0].push(result[item]);
				}
                new Chartist.Line(id, userNumData, options);
            },
            error:function () {
                alert("分析用户增量失败");
            }
        });
    }
    /**
     * 当前所有用户的年龄分析
     */
    function analyAgeOfAllUser(ageData,id,options){
        $.ajax({
            url:"/userInfo/getAgeOfAllUser",
            type:"post",
            dataType:"json",
            success:function (result) {
                for(var item in result){
                    ageData.labels.push(item);
                    ageData.series[0].push(result[item]);
                }
                new Chartist.Bar(id, ageData, options);
            },
            error:function () {
                alert("用户年龄分析失败");
            }
        });
    }

    /**
     * 显示当前人数最多的城市比例
     */
    function analyAreaNumOfUser(areaData,id,options,responsiveOptions) {
        $.ajax({
            url:"/userInfo/getAareOfAllUser",
            type:"post",
            dataType:"json",
            success:function (result) {
                for(var item in result){
                    areaData.labels.push(item);
                    areaData.series.push(result[item]);
                }
                new Chartist.Pie(id, areaData, options,responsiveOptions);
            },
            error:function () {
                alert("用户城市分析失败");
            }
        });
    }
    /*分析用户的性别*/
    function analySexNumOfUser(sexData,id,options,responsiveOptions) {
        $.ajax({
            url:"/userInfo/analySexNumOfUser",
            type:"post",
            dataType:"json",
            success:function (result) {
                for(var item in result){
                    sexData.labels.push(item);
                    sexData.series.push(result[item]);
                }
                new Chartist.Pie(id, sexData, options,responsiveOptions);
            },
            error:function () {
                alert("用户性别分析失败");
            }
        });
    }


    $(function() {
        var options;
        //用户增量数据
        var userNumData = {
            labels:[],
            series: [[],],
        };
        //用户年龄数据
        var ageData = {
            labels:[],
            series: [[],]
        };
        // line chart
        options = {
            height: "300px",
            showPoint: true,
            axisX: {
                value: "时间（天）",
                showGrid: false
            },
            axisY:{
                name:"数量(人)",
                onlyInteger: true
            },
            lineSmooth: false,
        };
        var totalDate = new Date();
        var date = totalDate.getFullYear()+"-"+totalDate.getMonth()+"-"+totalDate.getDay();
        getAddUsersNumByMouth(date,userNumData,"#demo-line-chart",options);
        analyAgeOfAllUser(ageData,"#demo-bar-chart",options);
       //城市展示数据
        var areaData = {
            labels:[],
            series: []
        };
        var options = {
            height: "300px",
            labelInterpolationFnc: function(value) {
                return value[0]
            }
        };
        var responsiveOptions = [
            ['screen and (min-width: 640px)', {
                chartPadding: 10,
                labelOffset: 30,
                labelInterpolationFnc: function(value) {
                    return value;
                }
            }],
            ['screen and (min-width: 1024px)', {
                chartPadding: 50,
                labelOffset: 80
            }]
        ];
        analyAreaNumOfUser(areaData,"#demo-area-chart",options,responsiveOptions);
        //性别展示数据
        var sexData = {
            labels:[],
            series: []
        };
        analySexNumOfUser(sexData,'#multiple-chart',options,responsiveOptions);
    });
</script>
</body>

</html>
